<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChainBid | 区块链拍卖平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ethers@6.8.0/dist/ethers.umd.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-gradient-to-r from-primary to-primary/80 text-white font-medium rounded-lg px-4 py-2 transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 active:scale-95;
      }
      .btn-secondary {
        @apply bg-white border border-primary text-primary font-medium rounded-lg px-4 py-2 transition-all duration-300 hover:bg-primary/5 active:scale-95;
      }
      .badge {
        @apply text-xs font-medium px-2 py-1 rounded-full;
      }
      .gradient-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-black/70 to-transparent;
      }
      .glassmorphism {
        @apply bg-white/10 backdrop-blur-lg border border-white/20;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
    <div class="glassmorphism">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16 md:h-20">
          <!-- Logo -->
          <div class="flex items-center">
            <a href="#" class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                <i class="fa-solid fa-gavel text-white"></i>
              </div>
              <span class="text-xl font-bold text-white">ChainBid</span>
            </a>
          </div>
          
          <!-- 桌面导航 -->
          <nav class="hidden md:flex space-x-8">
            <a href="#featured" class="text-white hover:text-primary/80 transition-colors font-medium">精选拍卖</a>
            <a href="#latest" class="text-white hover:text-primary/80 transition-colors font-medium">最新上架</a>
            <a href="#categories" class="text-white hover:text-primary/80 transition-colors font-medium">分类浏览</a>
            <a href="#stats" class="text-white hover:text-primary/80 transition-colors font-medium">市场数据</a>
          </nav>
          
          <!-- 右侧操作区 -->
          <div class="flex items-center space-x-4">
            <div class="relative hidden md:block">
              <input type="text" placeholder="搜索拍卖品..." class="pl-10 pr-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-primary/50 w-48 lg:w-64 transition-all duration-300">
              <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-white/60"></i>
            </div>
            
            <button id="walletBtn" class="btn-primary hidden md:block">
              <i class="fa-solid fa-wallet mr-2"></i>连接钱包
            </button>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobileMenuBtn" class="md:hidden text-white focus:outline-none">
              <i class="fa-solid fa-bars text-xl"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-dark-2/95 backdrop-blur-md">
      <div class="container mx-auto px-4 py-4 space-y-4">
        <div class="relative">
          <input type="text" placeholder="搜索拍卖品..." class="pl-10 pr-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-primary/50 w-full">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-white/60"></i>
        </div>
        <nav class="flex flex-col space-y-3">
          <a href="#featured" class="text-white hover:text-primary/80 transition-colors font-medium py-2">精选拍卖</a>
          <a href="#latest" class="text-white hover:text-primary/80 transition-colors font-medium py-2">最新上架</a>
          <a href="#categories" class="text-white hover:text-primary/80 transition-colors font-medium py-2">分类浏览</a>
          <a href="#stats" class="text-white hover:text-primary/80 transition-colors font-medium py-2">市场数据</a>
          <button id="mobileWalletBtn" class="btn-primary mt-2">
            <i class="fa-solid fa-wallet mr-2"></i>连接钱包
          </button>
        </nav>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="pt-16 md:pt-20">
    <!-- 英雄区 -->
    <section class="relative h-[70vh] min-h-[500px] flex items-center justify-center overflow-hidden">
      <div class="absolute inset-0 z-0">
        <img src="https://picsum.photos/id/1/1920/1080" alt="拍卖背景" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-b from-black/60 to-black/90"></div>
      </div>
      
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight mb-6">
          发现独特的 <span class="text-primary">数字资产</span>
        </h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/80 max-w-2xl mx-auto mb-8">
          参与实时区块链拍卖，购买和出售稀有的数字艺术品、收藏品和虚拟资产
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <button class="btn-primary text-lg px-6 py-3">
            <i class="fa-solid fa-search mr-2"></i>浏览拍卖品
          </button>
          <button class="btn-secondary text-lg px-6 py-3 bg-white/10 text-white border-white/30 hover:bg-white/20">
            <i class="fa-solid fa-plus mr-2"></i>创建拍卖
          </button>
        </div>
        
        <!-- 数据统计 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16 max-w-4xl mx-auto">
          <div class="bg-white/5 backdrop-blur-md rounded-xl p-6 border border-white/10">
            <p class="text-white/70 text-sm">总拍卖额</p>
            <p class="text-2xl md:text-3xl font-bold text-white mt-1">2,548 ETH</p>
          </div>
          <div class="bg-white/5 backdrop-blur-md rounded-xl p-6 border border-white/10">
            <p class="text-white/70 text-sm">活跃拍卖</p>
            <p class="text-2xl md:text-3xl font-bold text-white mt-1">156</p>
          </div>
          <div class="bg-white/5 backdrop-blur-md rounded-xl p-6 border border-white/10">
            <p class="text-white/70 text-sm">注册用户</p>
            <p class="text-2xl md:text-3xl font-bold text-white mt-1">3,842</p>
          </div>
          <div class="bg-white/5 backdrop-blur-md rounded-xl p-6 border border-white/10">
            <p class="text-white/70 text-sm">完成交易</p>
            <p class="text-2xl md:text-3xl font-bold text-white mt-1">872</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选拍卖 -->
    <section id="featured" class="py-16 bg-dark">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center mb-10">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white">精选拍卖</h2>
          <a href="#" class="text-primary hover:text-primary/80 transition-colors font-medium flex items-center">
            查看全部 <i class="fa-solid fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 拍卖卡片 1 -->
          <div class="bg-dark-2 rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/20/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-primary/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                热门
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-4 gradient-overlay">
                <div class="flex justify-between items-center">
                  <div class="bg-black/50 backdrop-blur-sm rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-clock text-primary mr-2"></i>
                    <span class="text-white text-sm">04:25:16</span>
                  </div>
                  <div class="bg-primary/80 text-white rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-gavel mr-1"></i>
                    <span class="text-sm font-medium">12 bids</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Cyber Dreams #42</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">3.25 ETH</p>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/64/100/100" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary">
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
          
          <!-- 拍卖卡片 2 -->
          <div class="bg-dark-2 rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/26/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-success/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                新上架
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-4 gradient-overlay">
                <div class="flex justify-between items-center">
                  <div class="bg-black/50 backdrop-blur-sm rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-clock text-primary mr-2"></i>
                    <span class="text-white text-sm">23:12:45</span>
                  </div>
                  <div class="bg-primary/80 text-white rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-gavel mr-1"></i>
                    <span class="text-sm font-medium">3 bids</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Neon Genesis #18</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">1.75 ETH</p>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/65/100/100" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary">
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
          
          <!-- 拍卖卡片 3 -->
          <div class="bg-dark-2 rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/28/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute bottom-0 left-0 right-0 p-4 gradient-overlay">
                <div class="flex justify-between items-center">
                  <div class="bg-black/50 backdrop-blur-sm rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-clock text-primary mr-2"></i>
                    <span class="text-white text-sm">00:45:32</span>
                  </div>
                  <div class="bg-primary/80 text-white rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-gavel mr-1"></i>
                    <span class="text-sm font-medium">8 bids</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Future City #73</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">2.50 ETH</p>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/66/100/100" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary">
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
          
          <!-- 拍卖卡片 4 -->
          <div class="bg-dark-2 rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/42/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-warning/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                即将结束
              </div>
              <div class="absolute bottom-0 left-0 right-0 p-4 gradient-overlay">
                <div class="flex justify-between items-center">
                  <div class="bg-black/50 backdrop-blur-sm rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-clock text-primary mr-2"></i>
                    <span class="text-white text-sm">00:08:15</span>
                  </div>
                  <div class="bg-primary/80 text-white rounded-lg px-3 py-1 flex items-center">
                    <i class="fa-solid fa-gavel mr-1"></i>
                    <span class="text-sm font-medium">15 bids</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Quantum Realm #9</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">4.10 ETH</p>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/67/100/100" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary">
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 拍卖详情模态框 -->
    <div id="auctionModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div class="relative bg-dark-2 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <button id="closeModal" class="absolute top-4 right-4 text-white/80 hover:text-white z-10">
          <i class="fa-solid fa-times text-xl"></i>
        </button>
        
        <div class="grid grid-cols-1 md:grid-cols-2">
          <div class="relative">
            <img id="modalImage" src="https://picsum.photos/id/20/800/800" alt="Auction Item" class="w-full h-full object-cover">
            <div class="absolute bottom-0 left-0 right-0 p-6 gradient-overlay">
              <h2 id="modalTitle" class="text-2xl md:text-3xl font-bold text-white mb-2">Cyber Dreams #42</h2>
              <div class="flex items-center">
                <img src="https://picsum.photos/id/64/100/100" alt="Creator" class="w-10 h-10 rounded-full border-2 border-primary">
                <div class="ml-3">
                  <p class="text-white font-medium">@digital_creator</p>
                  <p class="text-white/70 text-sm">Creator</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="p-6 md:p-8">
            <div class="flex justify-between items-start mb-6">
              <div>
                <p class="text-white/60 text-sm">拍卖编号</p>
                <p class="text-white font-medium">#AUC-0042</p>
              </div>
              <div class="bg-primary/20 text-primary text-xs font-medium px-3 py-1 rounded-full">
                进行中
              </div>
            </div>
            
            <div class="mb-6">
              <p class="text-white/60 text-sm">起拍价</p>
              <p class="text-white font-bold text-xl">1.00 ETH</p>
            </div>
            
            <div class="mb-6">
              <p class="text-white/60 text-sm">当前出价</p>
              <p class="text-white font-bold text-3xl">3.25 ETH</p>
            </div>
            
            <div class="mb-6">
              <p class="text-white/60 text-sm">距离结束还剩</p>
              <div class="flex space-x-2 mt-2">
                <div class="bg-dark rounded-lg p-2 text-center w-16">
                  <span class="text-2xl font-bold text-white">04</span>
                  <span class="text-xs text-white/60">小时</span>
                </div>
                <div class="bg-dark rounded-lg p-2 text-center w-16">
                  <span class="text-2xl font-bold text-white">25</span>
                  <span class="text-xs text-white/60">分钟</span>
                </div>
                <div class="bg-dark rounded-lg p-2 text-center w-16">
                  <span class="text-2xl font-bold text-white">16</span>
                  <span class="text-xs text-white/60">秒</span>
                </div>
              </div>
            </div>
            
            <div class="mb-6">
              <p class="text-white/60 text-sm">出价历史 (12)</p>
              <div class="space-y-3 mt-3 max-h-40 overflow-y-auto pr-2">
                <div class="flex justify-between items-center bg-dark p-3 rounded-lg">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/68/100/100" alt="Bidder" class="w-8 h-8 rounded-full">
                    <div class="ml-3">
                      <p class="text-white font-medium text-sm">0xAbc...123</p>
                      <p class="text-white/60 text-xs">2分钟前</p>
                    </div>
                  </div>
                  <p class="text-primary font-bold">3.25 ETH</p>
                </div>
                <div class="flex justify-between items-center bg-dark p-3 rounded-lg">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/69/100/100" alt="Bidder" class="w-8 h-8 rounded-full">
                    <div class="ml-3">
                      <p class="text-white font-medium text-sm">0xEfd...456</p>
                      <p class="text-white/60 text-xs">15分钟前</p>
                    </div>
                  </div>
                  <p class="text-primary font-bold">3.00 ETH</p>
                </div>
                <div class="flex justify-between items-center bg-dark p-3 rounded-lg">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/70/100/100" alt="Bidder" class="w-8 h-8 rounded-full">
                    <div class="ml-3">
                      <p class="text-white font-medium text-sm">0xDef...789</p>
                      <p class="text-white/60 text-xs">1小时前</p>
                    </div>
                  </div>
                  <p class="text-primary font-bold">2.75 ETH</p>
                </div>
              </div>
            </div>
            
            <div class="mb-6">
              <p class="text-white/60 text-sm">你的出价</p>
              <div class="flex mt-2">
                <input type="number" step="0.01" min="3.30" value="3.30" class="flex-1 bg-dark border border-white/10 rounded-l-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary/50">
                <span class="bg-dark border-t border-b border-white/10 px-4 py-3 text-white/80">ETH</span>
              </div>
              <p class="text-danger text-xs mt-2">* 你的出价必须至少比当前价格高 0.05 ETH</p>
            </div>
            
            <button class="w-full btn-primary py-4 text-lg">
              确认出价
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新上架 -->
    <section id="latest" class="py-16 bg-gradient-to-b from-dark to-dark-2">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center mb-10">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white">最新上架</h2>
          <div class="flex space-x-2">
            <button class="btn-secondary px-3 py-1 text-sm">
              <i class="fa-solid fa-filter mr-1"></i>筛选
            </button>
            <div class="relative">
              <select class="bg-dark-2 border border-white/10 text-white rounded-lg px-4 py-1 appearance-none pr-8 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <option>最新上架</option>
                <option>价格从低到高</option>
                <option>价格从高到低</option>
                <option>结束时间</option>
              </select>
              <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-white/60 pointer-events-none"></i>
            </div>
          </div>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 最新上架卡片 1-6 -->
          <!-- 这里只展示3个，完整代码会包含6个 -->
          <div class="bg-dark rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/21/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-success/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                新上架
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Astral Journey #56</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">1.25 ETH</p>
                </div>
                <div class="bg-dark-2 rounded-lg px-3 py-1 flex items-center">
                  <i class="fa-solid fa-clock text-primary mr-2"></i>
                  <span class="text-white text-sm">23:12:45</span>
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
          
          <div class="bg-dark rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/23/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-success/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                新上架
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Neon City #24</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">0.85 ETH</p>
                </div>
                <div class="bg-dark-2 rounded-lg px-3 py-1 flex items-center">
                  <i class="fa-solid fa-clock text-primary mr-2"></i>
                  <span class="text-white text-sm">18:45:30</span>
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
          
          <div class="bg-dark rounded-xl overflow-hidden shadow-lg card-hover">
            <div class="relative">
              <img src="https://picsum.photos/id/25/600/600" alt="Digital Art" class="w-full h-64 object-cover">
              <div class="absolute top-4 right-4 bg-success/90 text-white text-xs font-medium px-2 py-1 rounded-full">
                新上架
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-white mb-2">Cyber Punk #11</h3>
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-white/60 text-sm">当前出价</p>
                  <p class="text-white font-bold text-lg">1.50 ETH</p>
                </div>
                <div class="bg-dark-2 rounded-lg px-3 py-1 flex items-center">
                  <i class="fa-solid fa-clock text-primary mr-2"></i>
                  <span class="text-white text-sm">12:30:15</span>
                </div>
              </div>
              <button class="w-full btn-primary">
                立即出价
              </button>
            </div>
          </div>
        </div>
        
        <div class="mt-10 text-center">
          <button class="btn-secondary px-6 py-3">
            加载更多 <i class="fa-solid fa-spinner ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- 分类浏览 -->
    <section id="categories" class="py-16 bg-dark-2">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-10">分类浏览</h2>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-paintbrush text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">数字艺术</h3>
            <p class="text-white/60 text-sm mt-1">142 个拍卖</p>
          </a>
          
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-gamepad text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">游戏资产</h3>
            <p class="text-white/60 text-sm mt-1">87 个拍卖</p>
          </a>
          
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-music text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">音乐</h3>
            <p class="text-white/60 text-sm mt-1">56 个拍卖</p>
          </a>
          
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-video text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">视频</h3>
            <p class="text-white/60 text-sm mt-1">32 个拍卖</p>
          </a>
          
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-book text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">收藏品</h3>
            <p class="text-white/60 text-sm mt-1">94 个拍卖</p>
          </a>
          
          <a href="#" class="bg-dark rounded-xl p-6 text-center card-hover">
            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-globe text-primary text-2xl"></i>
            </div>
            <h3 class="text-white font-medium">虚拟土地</h3>
            <p class="text-white/60 text-sm mt-1">45 个拍卖</p>
          </a>
        </div>
      </div>
    </section>

    <!-- 市场数据 -->
    <section id="stats" class="py-16 bg-dark">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-10">市场数据分析</h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="bg-dark-2 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-bold text-white mb-6">每周交易量</h3>
            <div class="h-80">
              <canvas id="transactionChart"></canvas>
            </div>
          </div>
          
          <div class="bg-dark-2 rounded-xl p-6 shadow-lg">
            <h3 class="text-xl font-bold text-white mb-6">热门类别分布</h3>
            <div class="h-80">
              <canvas id="categoryChart"></canvas>
            </div>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
          <div class="bg-dark-2 rounded-xl p-6 shadow-lg">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-xl font-bold text-white">最高成交价</h3>
              <span class="text-success text-sm font-medium">+12.5%</span>
            </div>
            <div class="flex items-center">
              <img src="https://picsum.photos/id/20/100/100" alt="Top Sale" class="w-16 h-16 rounded-lg object-cover">
              <div class="ml-4">
                <p class="text-white font-medium">Cyber Dreams #42</p>
                <p class="text-white/60 text-sm">4.25 ETH</p>
              </div>
            </div>
          </div>
          
          <div class="bg-dark-2 rounded-xl p-6 shadow-lg">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-xl font-bold text-white">活跃用户</h3>
              <span class="text-success text-sm font-medium">+8.3%</span>
            </div>
            <div class="flex items-center">
              <div class="flex -space-x-2">
                <img src="https://picsum.photos/id/64/100/100" alt="User" class="w-10 h-10 rounded-full border-2 border-dark-2">
                <img src="https://picsum.photos/id/65/100/100" alt="User" class="w-10 h-10 rounded-full border-2 border-dark-2">
                <img src="https://picsum.photos/id/66/100/100" alt="User" class="w-10 h-10 rounded-full border-2 border-dark-2">
                <img src="https://picsum.photos/id/67/100/100" alt="User" class="w-10 h-10 rounded-full border-2 border-dark-2">
                <div class="w-10 h-10 rounded-full bg-primary/20 border-2 border-dark-2 flex items-center justify-center text-primary text-xs font-medium">
                  +24
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-dark-2 rounded-xl p-6 shadow-lg">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-xl font-bold text-white">总拍卖额</h3>
              <span class="text-success text-sm font-medium">+18.7%</span>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center">
                <i class="fa-solid fa-chart-line text-primary text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-white font-bold text-2xl">2,548 ETH</p>
                <p class="text-white/60 text-sm">约 $4,852,640</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 钱包连接模态框 -->
    <div id="walletModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div class="relative bg-dark-2 rounded-xl max-w-md w-full">
        <button id="closeWalletModal" class="absolute top-4 right-4 text-white/80 hover:text-white z-10">
          <i class="fa-solid fa-times text-xl"></i>
        </button>
        
        <div class="p-8">
          <h2 class="text-2xl font-bold text-white mb-6">连接钱包</h2>
          <p class="text-white/60 mb-8">连接你的钱包开始参与拍卖和交易数字资产</p>
          
          <div class="space-y-4">
            <button class="w-full bg-white/10 hover:bg-white/15 transition-colors rounded-lg p-4 flex items-center">
              <img src="https://picsum.photos/id/100/100/100" alt="MetaMask" class="w-10 h-10 rounded-full">
              <span class="ml-4 text-white font-medium">MetaMask</span>
              <i class="fa-solid fa-arrow-right ml-auto text-white/60"></i>
            </button>
            
            <button class="w-full bg-white/10 hover:bg-white/15 transition-colors rounded-lg p-4 flex items-center">
              <img src="https://picsum.photos/id/101/100/100" alt="WalletConnect" class="w-10 h-10 rounded-full">
              <span class="ml-4 text-white font-medium">WalletConnect</span>
              <i class="fa-solid fa-arrow-right ml-auto text-white/60"></i>
            </button>
            
            <button class="w-full bg-white/10 hover:bg-white/15 transition-colors rounded-lg p-4 flex items-center">
              <img src="https://picsum.photos/id/102/100/100" alt="Coinbase" class="w-10 h-10 rounded-full">
              <span class="ml-4 text-white font-medium">Coinbase Wallet</span>
              <i class="fa-solid fa-arrow-right ml-auto text-white/60"></i>
            </button>
          </div>
          
          <div class="mt-8 pt-6 border-t border-white/10">
            <p class="text-white/60 text-sm text-center">
              连接即表示您同意我们的<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的钱包页面 -->
    <div id="walletPage" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div class="relative bg-dark-2 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <button id="closeWalletPage" class="absolute top-4 right-4 text-white/80 hover:text-white z-10">
          <i class="fa-solid fa-times text-xl"></i>
        </button>
        
        <div class="p-8">
          <h2 class="text-2xl font-bold text-white mb-6">我的钱包</h2>
          
          <div class="bg-dark rounded-xl p-6 mb-8">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-xl font-bold text-white">账户概览</h3>
              <button class="text-primary hover:text-primary/80 text-sm font-medium">
                <i class="fa-solid fa-refresh mr-1"></i>刷新
              </button>
            </div>
            
            <div class="flex items-center mb-6">
              <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center">
                <i class="fa-solid fa-wallet text-primary text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-white font-medium">0xAbc...123</p>
                <p class="text-white/60 text-sm">以太坊主网</p>
              </div>
              <button class="ml-auto text-white/60 hover:text-white">
                <i class="fa-solid fa-copy"></i>
              </button>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
              <div class="bg-dark-2 rounded-lg p-4">
                <p class="text-white/60 text-sm">可用余额</p>
                <p class="text-white font-bold text-2xl mt-1">2.54 ETH</p>
                <p class="text-white/60 text-xs mt-1">约 $4,780.50</p>
              </div>
              
              <div class="bg-dark-2 rounded-lg p-4">
                <p class="text-white/60 text-sm">可提款金额</p>
                <p class="text-white font-bold text-2xl mt-1">1.25 ETH</p>
                <p class="text-white/60 text-xs mt-1">约 $2,345.00</p>
              </div>
            </div>
          </div>
          
          <div class="mb-8">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-xl font-bold text-white">最近交易</h3>
              <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看全部</a>
            </div>
            
            <div class="space-y-4">
              <div class="bg-dark rounded-lg p-4 flex items-center">
                <div class="w-10 h-10 bg-success/20 rounded-full flex items-center justify-center">
                  <i class="fa-solid fa-arrow-down text-success"></i>
                </div>
                <div class="ml-4 flex-1">
                  <div class="flex justify-between">
                    <p class="text-white font-medium">拍卖收益</p>
                    <p class="text-success font-bold">+0.85 ETH</p>
                  </div>
                  <div class="flex justify-between mt-1">
                    <p class="text-white/60 text-sm">Cyber Dreams #42</p>
                    <p class="text-white/60 text-sm">2小时前</p>
                  </div>
                </div>
              </div>
              
              <div class="bg-dark rounded-lg p-4 flex items-center">
                <div class="w-10 h-10 bg-danger/20 rounded-full flex items-center justify-center">
                  <i class="fa-solid fa-arrow-up text-danger"></i>
                </div>
                <div class="ml-4 flex-1">
                  <div class="flex justify-between">
                    <p class="text-white font-medium">出价</p>
                    <p class="text-danger font-bold">-1.50 ETH</p>
                  </div>
                  <div class="flex justify-between mt-1">
                    <p class="text-white/60 text-sm">Future City #73</p>
                    <p class="text-white/60 text-sm">昨天</p>
                  </div>
                </div>
              </div>
              
              <div class="bg-dark rounded-lg p-4 flex items-center">
                <div class="w-10 h-10 bg-success/20 rounded-full flex items-center justify-center">
                  <i class="fa-solid fa-arrow-down text-success"></i>
                </div>
                <div class="ml-4 flex-1">
                  <div class="flex justify-between">
                    <p class="text-white font-medium">拍卖收益</p>
                    <p class="text-success font-bold">+2.10 ETH</p>
                  </div>
                  <div class="flex justify-between mt-1">
                    <p class="text-white/60 text-sm">Neon Genesis #18</p>
                    <p class="text-white/60 text-sm">3天前</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-xl font-bold text-white">提款记录</h3>
              <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看全部</a>
            </div>
            
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr class="border-b border-white/10">
                    <th class="text-left py-3 text-white/60 font-medium text-sm">交易哈希</th>
                    <th class="text-left py-3 text-white/60 font-medium text-sm">金额</th>
                    <th class="text-left py-3 text-white/60 font-medium text-sm">状态</th>
                    <th class="text-left py-3 text-white/60 font-medium text-sm">时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-white/10">
                    <td class="py-3">
                      <div class="flex items-center">
                        <p class="text-white text-sm truncate max-w-[150px]">0xAbc...123</p>
                        <button class="ml-2 text-white/60 hover:text-white">
                          <i class="fa-solid fa-external-link-alt"></i>
                        </button>
                      </div>
                    </td>
                    <td class="py-3 text-white">0.50 ETH</td>
                    <td class="py-3">
                      <span class="badge bg-success/20 text-success">成功</span>
                    </td>
                    <td class="py-3 text-white/60 text-sm">2025-05-15</td>
                  </tr>
                  <tr class="border-b border-white/10">
                    <td class="py-3">
                      <div class="flex items-center">
                        <p class="text-white text-sm truncate max-w-[150px]">0xDef...456</p>
                        <button class="ml-2 text-white/60 hover:text-white">
                          <i class="fa-solid fa-external-link-alt"></i>
                        </button>
                      </div>
                    </td>
                    <td class="py-3 text-white">0.75 ETH</td>
                    <td class="py-3">
                      <span class="badge bg-success/20 text-success">成功</span>
                    </td>
                    <td class="py-3 text-white/60 text-sm">2025-05-10</td>
                  </tr>
                  <tr>
                    <td class="py-3">
                      <div class="flex items-center">
                        <p class="text-white text-sm truncate max-w-[150px]">0xGhi...789</p>
                        <button class="ml-2 text-white/60 hover:text-white">
                          <i class="fa-solid fa-external-link-alt"></i>
                        </button>
                      </div>
                    </td>
                    <td class="py-3 text-white">1.25 ETH</td>
                    <td class="py-3">
                      <span class="badge bg-warning/20 text-warning">处理中</span>
                    </td>
                    <td class="py-3 text-white/60 text-sm">2025-05-08</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="mt-6">
              <button id="withdrawBtn" class="btn-primary w-full py-3">
                <i class="fa-solid fa-wallet mr-2"></i>提取收益
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提款模态框 -->
    <div id="withdrawModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div class="relative bg-dark-2 rounded-xl max-w-md w-full">
        <button id="closeWithdrawModal" class="absolute top-4 right-4 text-white/80 hover:text-white z-10">
          <i class="fa-solid fa-times text-xl"></i>
        </button>
        
        <div class="p-8">
          <h2 class="text-2xl font-bold text-white mb-6">提取收益</h2>
          
          <div class="mb-6">
            <p class="text-white/60 mb-2">可提取金额</p>
            <p class="text-white font-bold text-2xl">1.25 ETH</p>
            <p class="text-white/60 text-sm mt-1">约 $2,345.00</p>
          </div>
          
          <div class="mb-6">
            <label class="block text-white/60 mb-2">提取金额 (ETH)</label>
            <div class="flex">
              <input type="number" step="0.01" max="1.25" value="1.25" class="flex-1 bg-dark border border-white/10 rounded-l-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary/50">
              <span class="bg-dark border-t border-b border-white/10 px-4 py-3 text-white/80">ETH</span>
            </div>
          </div>
          
          <div class="mb-6">
            <label class="block text-white/60 mb-2">钱包地址</label>
            <div class="flex">
              <input type="text" value="0xAbc...123" class="flex-1 bg-dark border border-white/10 rounded-l-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary/50">
              <button class="bg-dark border border-white/10 border-l-0 rounded-r-lg px-4 py-3 text-white/80 hover:text-white">
                <i class="fa-solid fa-copy"></i>
              </button>
            </div>
          </div>
          
          <div class="mb-8">
            <div class="bg-primary/10 rounded-lg p-4">
              <p class="text-primary font-medium flex items-center">
                <i class="fa-solid fa-info-circle mr-2"></i> 交易手续费
              </p>
              <p class="text-white/80 mt-2">预计网络费用: 0.003 ETH (约 $5.60)</p>
            </div>
          </div>
          
          <div class="flex space-x-4">
            <button id="cancelWithdrawBtn" class="btn-secondary flex-1 py-3">
              取消
            </button>
            <button class="btn-primary flex-1 py-3">
              确认提取
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark pt-16 pb-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
              <i class="fa-solid fa-gavel text-white"></i>
            </div>
            <span class="text-xl font-bold text-white">ChainBid</span>
          </div>
          <p class="text-white/60 mb-6">
            全球领先的区块链拍卖平台，连接数字艺术家与收藏家的桥梁。
          </p>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center text-white hover:bg-primary transition-colors">
              <i class="fa-brands fa-twitter"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center text-white hover:bg-primary transition-colors">
              <i class="fa-brands fa-instagram"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center text-white hover:bg-primary transition-colors">
              <i class="fa-brands fa-discord"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center text-white hover:bg-primary transition-colors">
              <i class="fa-brands fa-telegram"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-white font-bold text-lg mb-6">快速链接</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-white/60 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#" class="text-white/60 hover:text-primary transition-colors">浏览拍卖</a></li>
            <li><a href="#" class="text-white/60 hover:text-primary transition-colors">创建拍卖</a></li>
            <li><a href="#" class="text-white/60 hover:text-primary transition-colors">市场数据</a></li>
            <li><a href="#" class="text-white/60 hover:text-primary transition-colors">帮助中心</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-white font-bold text-lg mb-6">联系我们</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fa-solid fa-envelope text-primary mt-1 mr-3"></i>
              <span class="text-white/60">support@chainbid.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa-solid fa-map-marker-alt text-primary mt-1 mr-3"></i>
              <span class="text-white/60">123 Blockchain Street, Crypto City</span>
            </li>
            <li class="flex items-start">
              <i class="fa-solid fa-phone text-primary mt-1 mr-3"></i>
              <span class="text-white/60">+1 (555) 123-4567</span>
            </li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-white font-bold text-lg mb-6">订阅更新</h3>
          <p class="text-white/60 mb-4">
            订阅我们的通讯，获取最新拍卖和平台更新。
          </p>
          <div class="flex">
            <input type="email" placeholder="您的邮箱地址" class="flex-1 bg-dark-2 border border-white/10 rounded-l-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary/50">
            <button class="bg-primary text-white rounded-r-lg px-4 hover:bg-primary/80 transition-colors">
              <i class="fa-solid fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center">
        <p class="text-white/60 text-sm mb-4 md:mb-0">
          &copy; 2025 ChainBid. All rights reserved.
        </p>
        <div class="flex space-x-6">
          <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">隐私政策</a>
          <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">服务条款</a>
          <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">Cookie政策</a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('bg-dark/95', 'backdrop-blur-md', 'shadow-lg');
        navbar.classList.remove('bg-transparent');
      } else {
        navbar.classList.remove('bg-dark/95', 'backdrop-blur-md', 'shadow-lg');
        navbar.classList.add('bg-transparent');
      }
    });
    
    // 移动菜单切换
    document.getElementById('mobileMenuBtn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobileMenu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 模态框控制
    const auctionCards = document.querySelectorAll('.auction-card');
    const auctionModal = document.getElementById('auctionModal');
    const closeModal = document.getElementById('closeModal');
    
    auctionCards.forEach(card => {
      card.addEventListener('click', () => {
        auctionModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
      });
    });
    
    closeModal.addEventListener('click', () => {
      auctionModal.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });
    
    // 钱包相关模态框
    const walletBtn = document.getElementById('walletBtn');
    const mobileWalletBtn = document.getElementById('mobileWalletBtn');
    const walletModal = document.getElementById('walletModal');
    const closeWalletModal = document.getElementById('closeWalletModal');
    const walletPage = document.getElementById('walletPage');
    const closeWalletPage = document.getElementById('closeWalletPage');
    const withdrawBtn = document.getElementById('withdrawBtn');
    const withdrawModal = document.getElementById('withdrawModal');
    const closeWithdrawModal = document.getElementById('closeWithdrawModal');
    const cancelWithdrawBtn = document.getElementById('cancelWithdrawBtn');
    
    walletBtn.addEventListener('click', () => {
      walletModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    });
    
    mobileWalletBtn.addEventListener('click', () => {
      walletModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
      document.getElementById('mobileMenu').classList.add('hidden');
    });
    
    closeWalletModal.addEventListener('click', () => {
      walletModal.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });
    
    // 模拟钱包连接成功后打开钱包页面
    document.querySelectorAll('#walletModal button').forEach(btn => {
      btn.addEventListener('click', () => {
        walletModal.classList.add('hidden');
        walletPage.classList.remove('hidden');
      });
    });
    
    closeWalletPage.addEventListener('click', () => {
      walletPage.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });
    
    withdrawBtn.addEventListener('click', () => {
      walletPage.classList.add('hidden');
      withdrawModal.classList.remove('hidden');
    });
    
    closeWithdrawModal.addEventListener('click', () => {
      withdrawModal.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });
    
    cancelWithdrawBtn.addEventListener('click', () => {
      withdrawModal.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });
    
    // 图表初始化
    window.addEventListener('load', function() {
      // 交易量图表
      const transactionCtx = document.getElementById('transactionChart').getContext('2d');
      new Chart(transactionCtx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '交易量 (ETH)',
            data: [320, 450, 380, 520, 650, 780, 820],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#165DFF',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(29, 33, 41, 0.9)',
              titleColor: '#fff',
              bodyColor: '#fff',
              borderColor: 'rgba(255, 255, 255, 0.1)',
              borderWidth: 1,
              padding: 12,
              displayColors: false
            }
          },
          scales: {
            x: {
              grid: {
                display: false,
                drawBorder: false
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.6)'
              }
            },
            y: {
              grid: {
                color: 'rgba(255, 255, 255, 0.05)',
                drawBorder: false
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.6)'
              }
            }
          }
        }
      });
      
      // 类别分布图表
      const categoryCtx = document.getElementById('categoryChart').getContext('2d');
      new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
          labels: ['数字艺术', '游戏资产', '音乐', '视频', '收藏品', '虚拟土地'],
          datasets: [{
            data: [35, 20, 15, 10, 12, 8],
            backgroundColor: [
              '#165DFF',
              '#36CFC9',
              '#00B42A',
              '#FF7D00',
              '#F53F3F',
              '#722ED1'
            ],
            borderWidth: 0,
            hoverOffset: 4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                color: 'rgba(255, 255, 255, 0.6)',
                padding: 15,
                usePointStyle: true,
                pointStyle: 'circle'
              }
            },
            tooltip: {
              backgroundColor: 'rgba(29, 33, 41, 0.9)',
              titleColor: '#fff',
              bodyColor: '#fff',
              borderColor: 'rgba(255, 255, 255, 0.1)',
              borderWidth: 1,
              padding: 12,
              callbacks: {
                label: function(context) {
                  return `${context.label}: ${context.raw}%`;
                }
              }
            }
          },
          cutout: '70%'
        }
      });
    });
    
    // 模拟区块链连接
    let isWalletConnected = false;
    
    async function connectWallet() {
      if (typeof window.ethereum === 'undefined') {
        alert('请安装MetaMask钱包插件');
        return;
      }
      
      try {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        console.log('钱包已连接:', accounts[0]);
        isWalletConnected = true;
        updateUIAfterConnect();
      } catch (error) {
        console.error('连接钱包失败:', error);
        alert('连接钱包失败: ' + error.message);
      }
    }
    
    function updateUIAfterConnect() {
      walletBtn.innerHTML = '<i class="fa-solid fa-wallet mr-2"></i>0xAbc...123';
      walletBtn.classList.remove('btn-primary');
      walletBtn.classList.add('bg-dark-2', 'border', 'border-white/10');
      
      // 连接成功后点击钱包按钮直接打开钱包页面
      walletBtn.removeEventListener('click', connectWallet);
      walletBtn.addEventListener('click', () => {
        walletPage.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
      });
    }
    
    // 为所有钱包连接按钮添加事件
    walletBtn.addEventListener('click', connectWallet);
    mobileWalletBtn.addEventListener('click', connectWallet);
  </script>
</body>
</html>    